<template lang="html">
  <section class='infocase'>
	<top-list
	  class='fiveoneline'
	  :listData ="topListDate"
	  @callBackTopList = "changeTopListDate"
	  :iconList='iconArray'>
	</top-list>
	<!-- 表单元素 -->
	<el-form class="selectArea" v-model='selectData' :inline='true' label-width='100px'>
		<el-form-item label='警情区域：'>
			<el-select
				clearable placeholder="请选择"
				v-model='selectData.areas'
				size='mini'>
				<el-option v-for='item in selectOptions.areas'
				:label='item.name'
				:key='item.value'
				:value='item.value'
				>
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label='所属警区：'>
			<el-select
				clearable placeholder="请选择"
				v-model='selectData.police'
				size='mini'
			>
				<el-option v-for='item in selectOptions.police'
				:label='item.name'
				:key='item.value'
				:value='item.value'
				>
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label='时间范围：'>
			<el-select
				clearable placeholder="请选择"
				v-model='selectData.timepick'
				size='mini'
			>
				<el-option v-for='item in selectOptions.timepick'
				:label='item.name'
				:key='item.value'
				:value='item.value'
				>
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label='自定义时间：'>
		  <el-date-picker
			v-model="selectData.timeRange[0]"
			align="right"
			type="date"
			size='mini'
			style='width:180px;'
			placeholder="开始日期"
			value-format='yyyy/MM/dd'
			@change = "handlerDatePickerChange"
			:picker-options='pickerBeginDateBefore'>
		  </el-date-picker>
		  <el-form-item label="至" label-width="40px">
			<el-date-picker
			  v-model="selectData.timeRange[1]"
			  align="right"
			  type="date"
			  size='mini'
			  style='width:180px;'
			  placeholder="结束日期"
			  value-format='yyyy/MM/dd'
			  @change = "handlerDatePickerChange"
			  :picker-options='pickerBeginDateAfter'>
			</el-date-picker>
		  </el-form-item>
		</el-form-item>
	</el-form>
	<!-- 受表单元素控制的区域 -->
	<div class="pie_area">
	  <normal-bar class="normal_bar" title='警情类别' chartId='normalBar' :propdata='caseInfoData'></normal-bar>
	  <case-pie class="pieItem" title='区域警情情况' chartId='leftPie' :seriesData="casePieInfoData.series" :areaData="casePieInfoData.area"></case-pie>
	</div>
	<!-- 趋势柱状图 -->
	<div class="pie_area">
	  <line-bar class="line_bar100"  :optionData='oneDayData' chartId='lineBarOneDay'></line-bar>
	</div>
	<div class="pie_area">
	  <line-bar class="line_bar100"  :optionData='oneMonthData' chartId='lineBarOneMonth'></line-bar>
	</div>
	<div class="pie_area_50">
	  <line-bar class="line_bar100"  :optionData='oneYearData' chartId='lineBarOneYear'></line-bar>
	  <line-bar class="line_bar100"  :optionData='fiveYearData' chartId='lineBarFiveYear' formatter='{a0} : {c0}<br/>{a1} : {c1}%'></line-bar>
	</div>
  </section>
</template>

<script>
import topList from "@/components/common/listPanel.vue";
import casePie from "@/components/common/charts/casepie.vue";
import normalBar from "@/components/common/charts/normalBar.vue";
import lineBar from "@/components/common/charts/lineBar.vue";
import {
  apiCaseInfo,
  apiCasePieInfo,
  apiCaseTrend,
  apiCaseTopList
} from "@/api/api";
export default {
  components: {
    topList,
    casePie,
    normalBar,
    lineBar
  },
  data() {
    return {
      /*这里传数据*/
      selectData: {
        areas: "",
        police: "",
        timepick: "",
        timeRange: ['','']
      },
      selectOptions: {
        areas: [],
        police: [],
        timepick: []
      },
      //翻译
      translate: {
        "01": "违法犯罪案件",
        "02": "治安事件",
        "03": "火灾事故",
        "04": "交通事故",
        "05": "交通违章",
        "06": "治安灾害事故",
        "07": "灾害事故",
        "08": "自杀",
        "09": "纠纷",
        "10": "公民求助",
        "11": "走失寻人",
        "12": "警务监督",
        "13": "其他警情"
      },
      //顶部数据
      topListDate: [
        { name: "全市警情总数", value: 0 },
        { name: "江城区警情数", value: 0 },
        { name: "阳西县警情总数", value: 0 },
        { name: "阳东区警情总数", value: 0 },
        { name: "阳春县警情总数", value: 0 },
        { name: "当日全市警情数", value: 0 },
        { name: "当日江城区警情数", value: 0 },
        { name: "当日阳西县警情数", value: 0 },
        { name: "当日阳东区警情数", value: 0 },
        { name: "当日阳春县警情数", value: 0 }
      ],
      iconArray: [
        "allcity_history",
        "onecity_history",
        "twocity_history",
        "threecity_history",
        "fourcity_history",
        "allcity_today",
        "onecity_today",
        "twocity_today",
        "threecity_today",
        "fourcity_today"
      ],
      //警情类型数据
      caseInfoData: {
        xAxis: [],
        value: []
      },
      casePieInfoData: {
        series: [],
        area: []
      },
      oneDayData: {
        title: "日趋势分析",
        legend: {
          data: ["上一期", "本期", "同比增长", "环比增长"]
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1时",
              "2时",
              "3时",
              "4时",
              "5时",
              "6时",
              "7时",
              "8时",
              "9时",
              "10时",
              "11时",
              "12时",
              "13时",
              "14时",
              "15时",
              "16时",
              "17时",
              "18时",
              "19时",
              "20时",
              "21时",
              "22时",
              "23时",
              "24时"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量"
          },
          {
            type: "value",
            name: "增长率",
            interval: 50,
            axisLabel: {
              show: true,
              formatter: "{value}%"
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "上一期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(63, 153, 2)" },
                  { offset: 0.5, color: "rgb(78, 185, 4)" },
                  { offset: 1, color: "rgb(78, 191, 0)" }
                ])
              }
            },
            data: []
          },
          {
            name: "本期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(39,120,204)" },
                  { offset: 0.5, color: "rgb(89,134,227)" },
                  { offset: 1, color: "rgb(131,147,248)" }
                ])
              }
            },
            data: []
          },
          {
            name: "同比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(103,213,161)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          },
          {
            name: "环比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(140,152,259)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          }
        ]
      },
      oneMonthData: {
        title: "月趋势分析",
        legend: {
          data: ["上一期", "本期", "同比增长", "环比增长"]
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量"
          },
          {
            type: "value",
            name: "增长率",
            interval: 50,
            axisLabel: {
              show: true,
              formatter: "{value}%"
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "上一期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(63, 153, 2)" },
                  { offset: 0.5, color: "rgb(78, 185, 4)" },
                  { offset: 1, color: "rgb(78, 191, 0)" }
                ])
              }
            },
            data: []
          },
          {
            name: "本期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(39,120,204)" },
                  { offset: 0.5, color: "rgb(89,134,227)" },
                  { offset: 1, color: "rgb(131,147,248)" }
                ])
              }
            },
            data: []
          },
          {
            name: "同比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(103,213,161)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          },
          {
            name: "环比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(140,152,259)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          }
        ]
      },
      oneYearData: {
        title: "年趋势分析",
        legend: {
          data: ["上一期", "本期", "同比增长", "环比增长"]
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量"
          },
          {
            type: "value",
            name: "增长率",
            interval: 50,
            axisLabel: {
              show: true,
              formatter: "{value}%"
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "上一期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(63, 153, 2)" },
                  { offset: 0.5, color: "rgb(78, 185, 4)" },
                  { offset: 1, color: "rgb(78, 191, 0)" }
                ])
              }
            },
            data: []
          },
          {
            name: "本期",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(39,120,204)" },
                  { offset: 0.5, color: "rgb(89,134,227)" },
                  { offset: 1, color: "rgb(131,147,248)" }
                ])
              }
            },
            data: []
          },
          {
            name: "同比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(103,213,161)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          },
          {
            name: "环比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(140,152,259)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          }
        ]
      },
      fiveYearData: {
        title: "五年趋势分析",
        legend: {
          data: ["年份", "环比增长"]
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量"
          },
          {
            type: "value",
            name: "增长率",
            interval: 50,
            axisLabel: {
              show: true,
              formatter: "{value}%"
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "年份",
            type: "bar",
            label: {
              show: true,
              position: "top"
            },
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(39,120,204)" },
                  { offset: 0.5, color: "rgb(89,134,227)" },
                  { offset: 1, color: "rgb(131,147,248)" }
                ])
              }
            },
            data: []
          },
          {
            name: "环比增长",
            type: "line",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "rgb(140,152,259)" }
                ])
              }
            },
            yAxisIndex: 1,
            data: []
          }
        ]
	    },
      pickerBeginDateBefore:{
        disabledDate: (time) => {
          let beginDateVal = new Date(this.selectData.timeRange[1]).getTime();
          if (beginDateVal) {
            return time.getTime() > beginDateVal;
          }
        }
      },
      pickerBeginDateAfter:{
        disabledDate: (time) => {
          let beginDateVal = new Date(this.selectData.timeRange[0]).getTime();
          if (beginDateVal) {
            return time.getTime() < beginDateVal;
          }
        }
      }
    };
  },
  methods: {
    //顶部日期选择
    changeTopListDate(date) {
      let _date = date.replace(/-/g, "");
      this.getCaseHour(_date);
      this.getCaseDay(_date);
      this.getCaseMonth(_date);
      this.getCase5year(_date);
      this.getTopListData(_date);
    },
    //时间范围选择
    handlerDatePickerChange() {
	  let val = this.selectData.timeRange;
      this.getCaseInfoData(val[0], val[1]);
      this.getCasePieInfoData(val[0], val[1]);
    },
    //顶部数据读取
    getTopListData(date) {
      apiCaseTopList(date).then(res => {
        let resData = res.data;
        let hisAll, dayAll;
        //清空为0
        this.topListDate.forEach(elem => {
          elem.value = 0;
        });
        // console.log(this.topListDate);
        hisAll = resData.month
          .map((elem, index) => {
            this.topListDate[index + 1].value = 0;
            switch (elem.name) {
              case "江城区":
                this.topListDate[1].value = elem.value;
                break;
              case "阳西县":
                this.topListDate[2].value = elem.value;
                break;
              case "阳东县":
                this.topListDate[3].value = elem.value;
                break;
              case "阳春市":
                this.topListDate[4].value = elem.value;
                break;
              default:
                console.log("false");
            }
            return elem.value;
          })
          .reduce((a, b) => a + b);
        this.topListDate[0].value = hisAll;
        if (resData.day.length == 0) {
          dayAll = 0;
        } else {
          dayAll = resData.day
            .map((elem, index) => {
              this.topListDate[index + 6].value = 0;
              switch (elem.name) {
                case "江城区":
                  this.topListDate[6].value = elem.value;
                  break;
                case "阳西县":
                  this.topListDate[7].value = elem.value;
                  break;
                case "阳东县":
                  this.topListDate[8].value = elem.value;
                  break;
                case "阳春市":
                  this.topListDate[9].value = elem.value;
                  break;
                default:
                  console.log("false");
              }
              return elem.value;
            })
            .reduce((a, b) => a + b);
        }
        this.topListDate[5].value = dayAll;
      });
    },
    //案情分析
    getCaseInfoData(startDate, endDate) {
      apiCaseInfo(startDate, endDate).then(res => {
        let resData = res.data;
        this.caseInfoData.xAxis.length = 0;
        this.caseInfoData.value.length = 0;
        resData.forEach(elem => {
          this.caseInfoData.xAxis.push(this.translate[elem.s_description]);
          this.caseInfoData.value.push(elem.JQSL);
        });
      });
    },
    getCasePieInfoData(startTime, endTime) {
      apiCasePieInfo(startTime, endTime).then(res => {
        let resData = res.data;
        this.casePieInfoData.series.length = 0;
        this.casePieInfoData.area.length = 0;
        resData.forEach(elem => {
          this.casePieInfoData.series.push(elem);
          this.casePieInfoData.area.push(elem.name);
        });
      });
    },
    //趋势接口
    getCaseHour(date) {
      apiCaseTrend(date, "Hour").then(res => {
        let resData = res.data;
        let _per;
        this.oneDayData.series[0].data.length = 0;
        this.oneDayData.series[1].data.length = 0;
        this.oneDayData.series[2].data.length = 0;
        this.oneDayData.series[3].data.length = 0;
        resData[1].result.forEach((elem, index) => {
          //上一期
          this.oneDayData.series[0].data.push(elem.sum);
          //本期
          this.oneDayData.series[1].data.push(resData[0].result[index].sum);
          //同比
          _per = Number.isFinite(
            (resData[0].result[index].sum - elem.sum) * 100 / elem.sum
          );
          if (_per) {
            this.oneDayData.series[2].data.push(
              (
                (resData[0].result[index].sum - elem.sum) *
                100 /
                elem.sum
              ).toFixed(2)
            );
          } else if (resData[0].result[index].sum == 0 && elem.sum == 0) {
            this.oneDayData.series[2].data.push(0);
          } else {
            this.oneDayData.series[2].data.push(100);
          }
          //环比
          if (index == 0) {
            if (resData[1].result[23].sum == 0) {
              this.oneDayData.series[3].data.push(100);
            } else {
              this.oneDayData.series[3].data.push(
                (
                  (resData[0].result[1].sum - resData[1].result[23].sum) *
                  100 /
                  resData[1].result[23].sum
                ).toFixed(2)
              );
            }
          } else {
            _per = Number.isFinite(
              (resData[0].result[index].sum -
                resData[0].result[index - 1].sum) *
                100 /
                resData[0].result[index - 1].sum
            );
            if (_per) {
              this.oneDayData.series[3].data.push(
                (
                  (resData[0].result[index].sum -
                    resData[0].result[index - 1].sum) *
                  100 /
                  resData[0].result[index - 1].sum
                ).toFixed(2)
              );
            } else if (
              resData[0].result[index].sum == 0 &&
              resData[0].result[index - 1].sum == 0
            ) {
              this.oneDayData.series[3].data.push(0);
            } else {
              this.oneDayData.series[3].data.push(100);
            }
          }
        });
      });
    },
    getCaseDay(date) {
      apiCaseTrend(date, "Day").then(res => {
        this.oneMonthData.series[0].data.length = 0;
        this.oneMonthData.series[1].data.length = 0;
        this.oneMonthData.series[2].data.length = 0;
        this.oneMonthData.series[3].data.length = 0;
        this.oneMonthData.xAxis[0].data.length = 0;
        let resData = res.data;
        let length = resData[1].result.length - 1,
          _length = resData[0].result.length - 1;
        let _per;
        if (!resData[1].result[_length]) {
          resData[1].result[_length] = { sum: 0 };
        }
        resData[0].result.forEach((elem, index) => {
          //日期
          this.oneMonthData.xAxis[0].data.push(elem.month);
          //本期
          this.oneMonthData.series[1].data.push(elem.sum);
          //上一期
          this.oneMonthData.series[0].data.push(resData[1].result[index].sum);
          //同比
          _per = Number.isFinite(
            (elem.sum - resData[1].result[index].sum) *
              100 /
              resData[1].result[index].sum
          );
          if (_per) {
            this.oneMonthData.series[2].data.push(
              (
                (elem.sum - resData[1].result[index].sum) *
                100 /
                resData[1].result[index].sum
              ).toFixed(2)
            );
          } else if (elem.sum == 0 && resData[1].result[index].sum == 0) {
            this.oneMonthData.series[2].data.push(0);
          } else {
            this.oneMonthData.series[2].data.push(100);
          }
          //环比
          if (index == 0) {
            this.oneMonthData.series[3].data.push(
              (
                (resData[0].result[0].sum - resData[1].result[length].sum) *
                100 /
                resData[1].result[length].sum
              ).toFixed(2)
            );
          } else {
            _per = Number.isFinite(
              (resData[0].result[index].sum -
                resData[0].result[index - 1].sum) *
                100 /
                resData[0].result[index - 1].sum
            );
            if (_per) {
              this.oneMonthData.series[3].data.push(
                (
                  (resData[0].result[index].sum -
                    resData[0].result[index - 1].sum) *
                  100 /
                  resData[0].result[index - 1].sum
                ).toFixed(2)
              );
            } else if (
              resData[0].result[index].sum == 0 &&
              resData[0].result[index - 1].sum == 0
            ) {
              this.oneMonthData.series[3].data.push(0);
            } else {
              this.oneMonthData.series[3].data.push(100);
            }
          }
        });
      });
    },
    getCaseMonth(date) {
      apiCaseTrend(date, "Month").then(res => {
        let resData = res.data;
        let _per;
        this.oneYearData.series[0].data.length = 0;
        this.oneYearData.series[1].data.length = 0;
        this.oneYearData.series[2].data.length = 0;
        this.oneYearData.series[3].data.length = 0;
        resData[0].result.forEach((elem, index) => {
          //本期
          this.oneYearData.series[1].data.push(elem.sum);
          //上一期
          this.oneYearData.series[0].data.push(resData[1].result[index].sum);
          // 同比
          _per = Number.isFinite(
            (elem.sum - resData[1].result[index].sum) *
              100 /
              resData[1].result[index].sum
          );
          if (_per) {
            this.oneYearData.series[2].data.push(
              (
                (elem.sum - resData[1].result[index].sum) *
                100 /
                resData[1].result[index].sum
              ).toFixed(2)
            );
          } else if (elem.sum == 0 && resData[1].result[index].sum == 0) {
            this.oneYearData.series[2].data.push(0);
          } else {
            this.oneYearData.series[2].data.push(100);
          }
          //环比

          if (index == 0) {
            this.oneYearData.series[3].data.push(
              (
                (resData[0].result[0].sum - resData[1].result[11].sum) *
                100 /
                resData[1].result[11].sum
              ).toFixed(2)
            );
          } else {
            _per = Number.isFinite(
              (resData[0].result[index].sum -
                resData[0].result[index - 1].sum) *
                100 /
                resData[0].result[index - 1].sum
            );
            if (_per) {
              this.oneYearData.series[3].data.push(
                (
                  (resData[0].result[index].sum -
                    resData[0].result[index - 1].sum) *
                  100 /
                  resData[0].result[index - 1].sum
                ).toFixed(2)
              );
            } else if (
              resData[0].result[index].sum == 0 &&
              resData[0].result[index - 1].sum == 0
            ) {
              this.oneYearData.series[3].data.push(0);
            } else {
              this.oneYearData.series[3].data.push(100);
            }
          }
        });
      });
    },
    getCase5year(date) {
      apiCaseTrend(date, "Year").then(res => {
        let resData = res.data;
        this.fiveYearData.xAxis[0].data.length = 0;
        this.fiveYearData.series[0].data.length = 0;
        this.fiveYearData.series[1].data.length = 0;
        for (let i = 0; i < 5; i++) {
          this.fiveYearData.xAxis[0].data.unshift(resData[i].year);
          //年份数据
          this.fiveYearData.series[0].data.unshift(resData[i].sum);
          //环比
          this.fiveYearData.series[1].data.unshift(
            (
              (resData[i].sum - resData[i + 1].sum) *
              100 /
              resData[i + 1].sum
            ).toFixed(2)
          );
        }
      });
    }
  },
  created() {
    let startDate = new Date()._toDate0String().replace(/\d{2}$/, "01"), //月初
      endDate = new Date()._toDate0String(), //今天
      startTime = new Date()._toDate0String() + "00", //今天00
      endTime = new Date()._toDate0String() + "24"; //今天24
    this.getCaseInfoData(startDate, endDate);
    this.getCasePieInfoData(startDate, endDate);
    //趋势
    this.getCaseHour(endDate);
    this.getCaseDay(endDate);
    this.getCaseMonth(endDate);
    this.getCase5year(endDate);
    this.getTopListData(endDate);
  }
};
</script>

<style lang="scss">
.fiveoneline {
  .container {
    .item {
      width: 19% !important;
    }
  }
}
.infocase {
  width: 94%;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 6px;
  .pie_area {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 400px;
    margin-bottom: 30px;
    .pieItem {
      float: right;
      width: 32%;
    }
    .line_bar100 {
      width: 100%;
      margin: 0 auto;
    }
    .normal_bar {
      width: 65%;
    }
  }
  .pie_area_50 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
    .line_bar100 {
      width: 48%;
    }
  }
}
.selectArea {
  width: 100%;
}
</style>
